<template>
  <view class="rcord-container">
    <view class="header-content">
      <!-- <view class="text">
        平台审核通过后，抖音账号会进入抖音审核期预计1天内发送绑定服务通知，请留意平台审核通过后的抖音号站内信，及时复制平台内的授权码
      </view>
      <view class="tip-text">注：抖音极速版火山版暂时无法接受邀请通知请登录正版抖音接收。</view> -->
      <image
        src="https://img.alicdn.com/imgextra/i4/1888948409/O1CN01C0bnQs2BzNTTgLNW2_!!1888948409.png"
        mode="widthFix"
        style="width: 100%;"
      />
    </view>

    <view v-if="list && list.length" class="list-container">
      <view
        v-for="item in list"
        :key="item.id"
        class="list-item">
        <view class="list-title flex ac">
          <view v-if="item.status === '0' || item.status === '3'" class="record-status status-bg1 flex ac jc">申请中</view>
          <view v-else-if="item.status === '1'" class="record-status status-bg2 flex ac jc">成功</view>
          <view v-else-if="item.status === '2'" class="record-status flex ac jc">失败</view>
          <view class="status-text">
            <text v-if="item.status === '0' || item.status === '3'">正在申请中...</text>
            <text v-else-if="item.status === '1'">申请成功</text>
            <text v-else-if="item.status === '2'">{{ item.remark || '申请失败' }}</text>
          </view>
        </view>

        <view class="list-content">
          <view class="info-item flex ac">
            <view class="info-lable">抖音号：</view>
            <view class="info-text">{{ item.douyin }}</view>
          </view>

          <view class="info-item flex ac">
            <view class="info-lable">姓名：</view>
            <view class="info-text">{{ item.rela_name }}</view>
          </view>

          <view class="info-item flex ac">
            <view class="info-lable">身份证号码：</view>
            <view class="info-text">{{ item.no_number }}</view>
          </view>

          <view v-if="item.code_str && item.status === '1'" class="info-item flex ac">
            <view class="info-lable">授权码：</view>
            <view class="info-text">{{ item.code_str }}</view>
            <view class="copy flex jc ac" @click="setClipboardData(item.code_str)">复制</view>
          </view>
        </view>

      </view>
    </view>

    <view v-else class="no-data flex jc ac fw">
      <image style="width: 300rpx;height: 300rpx;"
      src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01CSQqUP2BzNNzcB96v_!!1888948409.png"></image>
      <view class="tip flex jc ac" style="width: 100%;">暂无数据</view>
    </view>

  </view>
</template>

<script>
  import { findDouyinMountListByUserId } from '@/api/user';
  export default {
    data() {
      return {
        list: []
      }
    },

    onLoad() {
      this.findDouyinMountListByUserId();
    },

    methods: {
      // 获取抖音挂载列表
      findDouyinMountListByUserId() {
        findDouyinMountListByUserId().then(result => {
          if (result && result.data && result.data.length > 0) {
            this.list = result.data;
          }
        })
      },

      // 设置复制
      setClipboardData(text) {
        uni.setClipboardData({
          data: text,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              mask: false
            })
          }
        });
      },
    },
  }
</script>

<style lang="scss">
  pages{
    background-color: #f5f5f5;
  }

  .list-container{
    padding: 32rpx;

    .list-item{
      padding: 24rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0rpx 8rpx 10rpx 2rpx #EEEEF3;
      margin-bottom: 32rpx;
    }

    .info-item{
      padding-top: 12rpx;
      font-size: 26rpx;
      position: relative;

      .info-lable{
        color: #838385;
        padding-right: 12rpx;
      }

      .copy{
        position: absolute;
        width: 60rpx;
        height: 100%;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        color: $uni-color-primary;
      }
    }

    .record-status{
      width: 140rpx;
      height: 48rpx;
      border-radius: 24rpx;
      background: #ebebeb;
      font-size: 28rpx;
      color: #676666;
    }

    .status-bg1{
      background: #dcecfa;
      color: $uni-color-primary;
    }

    .status-bg2{
      background: #e1fdec;
      color: #3dfc86;
    }

    .status-text{
      font-size: 24rpx;
      padding-left: 12rpx;
    }

    .list-title{
      padding-bottom: 24rpx;
      border-bottom: 2rpx solid rgb(242,242,245);
      margin-bottom: 12rpx;
    }
  }

  .header-content{
    line-height: 1.5;
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 16rpx;

    .tip-text{
      margin-top: 24rpx;
      font-weight: 400;
      font-size: 24rpx;
    }
  }
</style>
